8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"SWRDataProvider"] 90:T6384,[V0_FILE]typescriptreact:file="quote-calculator.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Clock, ImageIcon, MapPin } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { useTheme } from "next-themes" import { useToast } from "@/components/ui/use-toast" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" const hourlyRates = { 1: { price: 199, maxLocations: 2, defaultImages: 25 }, 2: { price: 349, maxLocations: 4, defaultImages: 60 }, 3: { price: 499, maxLocations: 7, defaultImages: 80 }, 4: { price: 549, maxLocations: 9, defaultImages: 110 }, 5: { price: 749, maxLocations: 10, defaultImages: 130 }, } // Add this new style block const gradientAnimationStyle = ` @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } ` const ADDITIONAL_IMAGE_PRICE = 4.99 const MAX_QUOTES_PER_USER = 3 interface Quote { name: string email: string phone: string hours: number locations: number editedImages: number totalCost: number date: string } export default function QuoteCalculator() { const [hours, setHours] = useState(3) const [locations, setLocations] = useState(7) const [editedImages, setEditedImages] = useState(80) const [extraImages, setExtraImages] = useState(null) const [totalCost, setTotalCost] = useState(0) const [name, setName] = useState("") const [email, setEmail] = useState("") const [phone, setPhone] = useState("") const [showSummary, setShowSummary] = useState(false) const [quotesRequested, setQuotesRequested] = useState(0) const [quotes, setQuotes] = useState([]) const [showQuotaExhaustedDialog, setShowQuotaExhaustedDialog] = useState(false) const { setTheme } = useTheme() const { toast } = useToast() useEffect(() => { setTheme("dark") }, [setTheme]) useEffect(() => { const basePrice = hourlyRates[hours as keyof typeof hourlyRates].price const defaultImages = hourlyRates[hours as keyof typeof hourlyRates].defaultImages let additionalImages = Math.max(0, editedImages - defaultImages) if (extraImages !== null) { additionalImages = extraImages } const additionalImagesCost = additionalImages * ADDITIONAL_IMAGE_PRICE setTotalCost(basePrice + additionalImagesCost) const maxLocations = hourlyRates[hours as keyof typeof hourlyRates].maxLocations if (locations > maxLocations) { setLocations(maxLocations) } }, [hours, locations, editedImages, extraImages]) useEffect(() => { const storedQuotes = localStorage.getItem(`quotesRequested_${email}`) if (storedQuotes) { setQuotesRequested(Number.parseInt(storedQuotes, 10)) } else { setQuotesRequested(0) } }, [email]) useEffect(() => { if (showSummary) { setShowSummary(false) setName("") setEmail("") setPhone("") } }, [hours, locations, editedImages, extraImages]) const handleHoursChange = (newHours: number) => { setHours(newHours) setEditedImages(hourlyRates[newHours as keyof typeof hourlyRates].defaultImages) setLocations(hourlyRates[newHours as keyof typeof hourlyRates].maxLocations) setExtraImages(null) } const handleEditedImagesChange = (value: number[]) => { const roundedValue = Math.round(value[0] / 5) * 5 setEditedImages(hourlyRates[hours as keyof typeof hourlyRates].defaultImages + roundedValue) setExtraImages(null) } const handleExtraImagesChange = (value: string) => { const numValue = Number.parseInt(value, 10) if (numValue >= 100 && numValue <= 500) { setExtraImages(numValue) setEditedImages(hourlyRates[hours as keyof typeof hourlyRates].defaultImages) } else { setExtraImages(null) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (quotesRequested >= MAX_QUOTES_PER_USER) { setShowQuotaExhaustedDialog(true) return } setShowSummary(true) setQuotesRequested((prev) => { const newCount = prev + 1 localStorage.setItem(`quotesRequested_${email}`, newCount.toString()) return newCount }) setQuotes((prev) => [ ...prev, { name, email, phone, hours, locations, editedImages: extraImages !== null ? extraImages + hourlyRates[hours as keyof typeof hourlyRates].defaultImages : editedImages, totalCost, date: new Date().toLocaleString(), }, ]) toast({ title: "Quote Generated", description: "Your quote is now available in the summary section.", }) } const additionalImages = extraImages !== null ? extraImages : Math.max(0, editedImages - hourlyRates[hours as keyof typeof hourlyRates].defaultImages) const additionalImagesCost = additionalImages * ADDITIONAL_IMAGE_PRICE const basePrice = hourlyRates[hours as keyof typeof hourlyRates].price return (

DollarGill Photography

Professional Photography Services

Photography Quote Calculator Customize your photography package Duration Details Quote

Shoot Duration (hours) handleHoursChange(value[0])} className="mt-2 [&_[role=slider]]:bg-purple-400 [&_[role=slider]]:border-pink-400 [&_[role=slider]]:shadow-md [&_[role=track]]:bg-gradient-to-r [&_[role=track]]:from-purple-500 [&_[role=track]]:to-pink-500 [&_[role=range]]:bg-gradient-to-r [&_[role=range]]:from-purple-600 [&_[role=range]]:to-pink-600" />

handleHoursChange(Number(e.target.value))} min={1} max={5} className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" />

Included in your package:

{hours} hour{hours > 1 ? "s" : ""} Up to {hourlyRates[hours as keyof typeof hourlyRates].maxLocations} locations {hourlyRates[hours as keyof typeof hourlyRates].defaultImages} edited images

Number of Locations setLocations(value[0])} className="mt-2 [&_[role=slider]]:bg-purple-400 [&_[role=slider]]:border-pink-400 [&_[role=slider]]:shadow-md [&_[role=track]]:bg-gradient-to-r [&_[role=track]]:from-purple-500 [&_[role=track]]:to-pink-500 [&_[role=range]]:bg-gradient-to-r [&_[role=range]]:from-purple-600 [&_[role=range]]:to-pink-600" />

setLocations(Number(e.target.value))} min={1} max={hourlyRates[hours as keyof typeof hourlyRates].maxLocations} className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" />

Additional Edited Images (0-100) handleEditedImagesChange(value)} className="mt-2 [&_[role=slider]]:bg-purple-400 [&_[role=slider]]:border-pink-400 [&_[role=slider]]:shadow-md [&_[role=track]]:bg-gradient-to-r [&_[role=track]]:from-purple-500 [&_[role=track]]:to-pink-500 [&_[role=range]]:bg-gradient-to-r [&_[role=range]]:from-purple-600 [&_[role=range]]:to-pink-600" disabled={extraImages !== null} />

handleEditedImagesChange([Math.round(Number(e.target.value) / 5) * 5])} min={0} max={100} step={5} className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" disabled={extraImages !== null} />

Need more images? Enter a number (100-500) handleExtraImagesChange(e.target.value)} min={100} max={500} className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" placeholder="Enter 100-500" /> {extraImages === null && (

You can select images between 0-100 through the slider above.

)}

Name setName(e.target.value)} required className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" />

Email setEmail(e.target.value)} required className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" />

Phone Number setPhone(e.target.value)} required className="bg-purple-950/30 border-purple-500/30 text-purple-200 focus:border-pink-400 focus:ring-pink-400/20 transition-colors" />

{showSummary && (

Quote Summary

Item Details Amount Base Price ({hours} hour shoot) {hours} hour{hours > 1 ? "s" : ""}, {locations} location{locations > 1 ? "s" : ""},{" "} {hourlyRates[hours as keyof typeof hourlyRates].defaultImages} images ${basePrice.toFixed(2)} {(additionalImages > 0 || extraImages !== null) && ( Additional Image Edits {extraImages !== null ? extraImages : additionalImages} extra image {(extraImages !== null ? extraImages : additionalImages) > 1 ? "s" : ""} @ $ {ADDITIONAL_IMAGE_PRICE} each $ {((extraImages !== null ? extraImages : additionalImages) * ADDITIONAL_IMAGE_PRICE).toFixed( 2, )} )} Total (excluding GST) ${totalCost.toFixed(2)}

Total Estimated Cost (excluding GST)

${totalCost.toFixed(2)}

)} {quotes.length > 0 && (

Previous Quotes

Date Hours Locations Images Total Cost {quotes.map((quote, index) => ( {quote.date} {quote.hours} {quote.locations} {quote.editedImages} ${quote.totalCost.toFixed(2)} ))}

)}

) } 84:["$","$L8e",null,{"chatId":"XruJe8JepQq","children":["$","$L8f",null,{"data":{"@\"active-block\",\"XruJe8JepQq\",":{"id":"b_YlqNjiywDK2","messageId":"GEboxsiDWOzKOrNx184Eqs4bKckWTOwk","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"photography-quote-calculator","type":"code-project","project":"photography-quote-calculator"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"XruJe8JepQq\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This